<!DOCTYPE html>
<html>
  <head>
    <% include global/meta.html %>
    <% include global/top-css.html %>
    <title>yuscms</title>
</head>
  <body>

        <main class="main" data-info="<%=admin.permission%>">
			<div class="ys-admin-pos c-a1a3aa">
                首页<span class="f-sum">></span><span class="c-565b6d">友情链接</span><span class="f-sum">></span><span class="c-565b6d">新增</span>
              </div>
          
              <div class="ys-admin-tablist">
                  <div class="ys-admin-tab-header row justify-content-b">
                      <p class="f-14 c-565b6d pl-8 pt-6"></p>
                  </div>
          
                  <div class="mr-10 ml-10">
                      <form @submit.prevent="checkForm" name="form">
                      <ul class="overflow-h pb-20">
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">链接类型</label>
                              </div>
                              <div class="col-bd">
                                  <input type="radio" name="type" class="radio pos-r t-4 mr-5" v-model="params.type" value="0" />
                                  <span class="c-565b6d f-14 mr-15">文字</span>
                                  <input type="radio" name="type" class="radio pos-r t-4 mr-5" v-model="params.type" value="1" />
                                  <span class="c-565b6d f-14">logo</span>
                              </div>
                          </li>
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">链接标题</label>
                              </div>
                              <div class="col-10">
                                  <input type="text" name="title" class="input" v-model="params.title" />
                              </div>
                          </li>
          
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">链接网址</label>
                              </div>
                              <div class="col-10">
                                  <input type="text" name="url" class="input" v-model="params.url" />
                              </div>
                          </li>
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">链接LOGO</label>
                              </div>
                              
                              <div class="col-bd row c-666">
                                  <img v-if="params.img" class="thumb" :src="params.img" alt="">
                                  <span class="ico-camera"><input @change="sendThumb" type="file" name="img" id="thumb"></span>
                              </div>
                              <div class="col-ft col-16 c-999" id="thumb">
                                  (缩略图必须是jpg,gif,png,并且200k之内)
                              </div>
                              
                          </li>
                           
                           <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">描　　述</label>
                              </div>
                              <div class="col-10">
                                  <textarea name="info" v-model="params.info" placeholder="" class="textarea flex"></textarea>
                              </div>
                          </li>
                          
                          <li class="pd-10 mt-35">
                              <div class="col-hd">
                              &nbsp;&nbsp;&nbsp;&nbsp;
                              </div>
                              <div class="col-bd row ml-35">
                              <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布"/>
                              <input name="send" class="btn btn-reset ml-35" type="reset" value="重置"/>
                              </div>
                          </li>
              
                      </ul>
                   </form>
                  </div>
              </div>
        </main>
     
	<% include global/all-js.html %>
	<script>
		var vm = new Vue({
			el:'.main',
			data:{
                params:{
          img:'',
          title:'',
          url:'',
          info:'',
          state:0
        }
			},
			methods:{
                sendThumb:function(){
        var _this = this;

        var formData = new FormData();
        formData.append('file',$('#thumb')[0].files[0]);
        var thumb = $('#thumb').val().split('.')[1];
        
        if(thumb != 'jpg' && thumb != 'gif' && thumb != 'jpeg' && thumb != 'png'){
            tipsWarn(_this,"请上传图片！");
            return false;
        }
      
        if(($('#thumb')[0].files[0].size / 1000) > 200){
            tipsWarn(_this,'缩略图不能超过200k');
            return false;
        }

        let config = {
            headers:{'Content-Type':'multipart/form-data'}
        }; 

        axios.post('/api/admin/slide/upload',formData,config)
        .then(data=>{
            let filterData = data.data;
            _this.params.img = filterData.data[0];
        }).catch((error)=>{
            console.error(error)
        })         
          
		},

       
        linkAdd(){
            let _this = this;
            axios.post('/api/admin/link/add',_this.params)
            .then((data)=>{
                let filterData = data.data;
                if(filterData.data.affectedRows===1){
                 tips(_this,'添加成功！');
                 _this.$router.go(-1);
                }
            })
            .catch((error)=>{
                console.error(error);
            }); 
        },
        checkForm:function(){
            var _this = this;
            if(!hasPermission('6')){
                tipsWarn(_this,'对不起,您没有操作权限^_^');
                return
            }
            var fm = document.form;

            var _this = this;

            if(_this.params.url.length == ''){
                tipsWarn(_this,'链接不得为空!^_^');
                fm.url.focus();
                return false;
            }

            if(_this.params.title.length >20){
                tipsWarn(_this,'标题不得大于20位!^_^');
                fm.title.focus();
                return false;
            }

            if(_this.params.info.length >200){
                tipsWarn(_this,'描述不能大于200位!^_^');
                fm.title.focus();
                return false;
            }

         
            _this.linkAdd()
            
        }
     
    },
 
    created: function(){
  
    },
    mounted:function(){ 
    
    }
		});
	</script>	
	</body>
</html>
